<template>
  <div class="resource">
    <div v-if="list[0]">
      <!-- <button @click="number">点击</button> -->
      <!-- <h2>{{ $route.params.userName }}</h2> -->
      <!-- <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1" @click="main"
            ><i class="el-icon-s-home"></i>主页</el-menu-item
          >
          <el-menu-item index="2" @click="resources"
            ><i class="el-icon-reading"></i>资源</el-menu-item
          >
          <el-menu-item index="3" @click="my"
            ><i class="el-icon-user"></i>个人</el-menu-item
          >
        </el-menu>
      </el-header> -->
      <el-main>
        <div class="content">
          <div class="section" v-for="book in data" :key="book.name">
            <div class="top">
              <div class="top-right">
                <!-- <a :href="book.link">{{ book.link }}</a> -->
                <div>
                  <a :href="book.link" @click="addViewNumber(book.name)">
                    {{ book.name }}
                  </a>
                </div>
                <div class="text line-limit-length">
                  {{ book.details }}
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="icons">
                <i class="el-icon-view"></i
                ><span class="viewNumber">{{ book.view }}</span>
              </div>
              <!-- <a
                class="icons"
                
                @click="addViewNumber(book.name)"
              >
                <i class="el-icon-share"></i>
              </a> -->
              <div>
                <a
                  class="icons"
                  :href="book.link"
                  @click="addViewNumber(book.name)"
                >
                  <i class="el-icon-more-outline"></i
                ></a>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </div>
    <div v-else class="blueHour">
      <h3>您还未登录，是否要点击登录?</h3>
      <el-button @click="login" type="disabled">点击登录</el-button>
    </div>
    <el-footer>
      <div class="header-container">
        <div class="header-left" @click="gitee">
          <svg
            t="1649494744692"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2518"
            width="20"
            height="20"
          >
            <path
              d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.312 25.312 0 0 0-25.28-25.312H417.184a189.632 189.632 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z"
              p-id="2519"
            ></path>
          </svg>
          支持项目
        </div>
        <div class="header-middle" @click="contact">
          <svg
            t="1649494380020"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1136"
            width="20"
            height="20"
          >
            <path
              d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
              p-id="1137"
            ></path>
          </svg>
          联系作者
        </div>
        <div class="header-right" @click="disclaimer">
          <i class="el-icon-warning-outline"></i>免责声明
        </div>
      </div>
      <div class="header-text">
        <p>该学习资源共享网站由黄炜俊、李映玲、刘思杰团队提供</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "icon-svg",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
  created() {
    this.pageInation();
  },
  data() {
    return {
      data: [
        // { name: "123", pwd: "123" },
        // { name: "456", pwd: "456" },
      ],
      //tabs标签页的高亮显示
      activeIndex2: "4",
    };
  },
  computed: {
    list() {
      return this.$store.state.list;
      // console.log(this.$store.state.list);
    },
  },
  mounted() {
    // let a=this.$route.params.userName
    let whomai = { name: this.$route.params.userName };
    this.$http.post("/", whomai).then((res) => {
      // console.log(res.data);
      // console.log(res.data[0].username);

      this.$store.commit("addNote", {
        // id: Math.random(),
        username: res.data[0].username,
        password: res.data[0].password,
        email: res.data[0].email,
        time: new Date().toLocaleString(),
      });
    });
  },
  methods: {
    //跳转登录页
    login() {
      this.$router.replace("/about");
    },
    addViewNumber(option1) {
      let options = option1;
      // window.location.href = option2;
      this.$http.post(`addViewNumber?${options}`).then((res) => {
        this.viewNumber++;
      });
    },
    // number() {
    //   console.log(this.data.some((val) => val.name == 123 && val.pwd == 456));
    // },
    //导航菜单
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //主页
    main() {
      this.$router.replace("/main");
    },
    //资源页
    resources() {
      this.$router.replace("/resources");
    },
    //个人页
    my() {
      this.$router.replace("/my");
    },
    //资源数据
    pageInation() {
      this.$http.get("sourcesList").then((res) => {
        console.log(res.data);
        let data_info = res.data;
        this.data.push(...data_info);
        console.log(this.data);
        console.log(this.data[0].name);
      });
    },
    //源码地址
    gitee() {
      window.location.href = "https://gitee.com/xiao_jun9999/studyshare";
    },
    //联系作者
    contact() {
      this.$router.push("contact");
    },
    //免责声明
    disclaimer() {
      this.$router.push("disclaimer");
    },
  },
};
</script>

<style scoped>
/* 去除超链接下划线 */
.content a {
  text-decoration: none;
  font-size: 20px;
}
/* 限制文字显示为一行 */
/* 文本不换行,这样超出一行的部分截取显示为... */
/* .line-limit-length {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

.el-header,
.el-footer {
  color: #333;
  text-align: center;
}
.resource .content {
  display: grid;
  /* 行间距和列间距是10px */
  grid-gap: 10px;
  /* auto-fill:自动填充，列宽最小是450px最大是一等分 */
  /* 列的数量是不固定的，只要浏览器能容纳都可以放置元素 */
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  /* 隐式指定行高、列宽 */
  grid-auto-rows: 200px 200px;
}
.content .section {
  background-color: rgb(255, 255, 255);
  border: 1px solid #000;
}

.content .section .top {
  background-color: rgb(255, 255, 255);
  display: flex;
}

/* 限制文字显示为一行 */
/* 文本不换行,这样超出一行的部分截取显示为... */
.line-limit-length {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content .section .top div {
  margin-top: 20px;
  padding-left: 20px;
}
.content .section .top-right {
  padding-right: 20px;
  text-align: left;
}
.content .section .bottom {
  border-top: 1px solid rgb(240, 240, 240);
  margin-top: 30px;
  height: 40px;
  display: flex;
  font-size: 20px;
  justify-content: space-around;
  align-items: center;
}

.viewNumber {
  margin-left: 10px;
  color: gray;
}
.content .section .bottom .icons:nth-child(2) {
  border-right: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
}
/* 引入icon的样式 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* 底部样式*/
.el-footer {
  color: #333;
  text-align: center;
}
.el-footer {
  color: gray;
  background-color: #000;
}

.el-footer .header-container {
  display: flex;
  justify-content: center;
}
.el-footer .header-container div {
  margin-left: 40px;
}
/* 背景样式 */
.resource .blueHour {
  width: 100vw;
  height: 100vh;
  margin-top: -50px;
}
.resource .blueHour {
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(left, #7e898f 0%, #636c75 100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.55
          )
          100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.08
          )
          63%);
  background: linear-gradient(90deg, #7e898f 0%, #636c75 100%),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.08) 63%
    );
  background-blend-mode: multiply, screen;
}

.resource {
  background: -webkit-linear-gradient(left, #7e898f 0%, #636c75 100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.55
          )
          100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.08
          )
          63%);
  background: linear-gradient(90deg, #7e898f 0%, #636c75 100%),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.08) 63%
    );
  background-blend-mode: multiply, screen;
}

.resource .darkAmber {
  padding-top: 60px;
  width: 50rem;
  height: 400px;
  background-image: -webkit-linear-gradient(top, #15140f 0%, #34312c 97%);
  background-image: linear-gradient(-180deg, #15140f 0%, #34312c 97%);
}
</style>